<template>
    <div id="main">
        <animation></animation>    
        <div class="main-bady">
            <div class="recommend">
                <div class="recommend-body" style="width:1200px;margin:0 auto">
                    <div style="float:left;width:370px;">
                        <img src="/img/index/img_a_03_x4gv.jpg" alt="" >
                        <div style="width:160px;height:80px;background-color:#fff; position: relative;left:100px;bottom:40px;font-size:12px;color:#5a5a5a;text-align:center">
                            <span style="padding-top: 15px;display: inline-block">HOT STYLE</span>
                            <br>
                            ——
                            <br>
                            <span># 热销玫瑰 #</span>
                        </div>
                    </div>
                    <div style="float:left;width:370px;margin:0 45px;">
                        <img src="/img/index/img_a_05_k85c.jpg" alt="" >
                        <div style="width:160px;height:80px;background-color:#fff; position: relative;left:100px;bottom:40px;font-size:12px;color:#5a5a5a;text-align:center">
                            <span style="padding-top: 15px;display: inline-block">SUMMER STYLE</span>
                            <br>
                            ——
                            <br>
                            <span># 夏季精选 #</span>
                        </div>
                    </div>
                    <div style="float:left;width:370px;">
                        <img src="/img/index/img_a_07_a4dq.jpg" alt="" >
                        <div style="width:160px;height:80px;background-color:#fff; position: relative;left:100px;bottom:40px;font-size:12px;color:#5a5a5a;text-align:center">
                            <span style="padding-top: 15px;display: inline-block">RECOMM STYLE</span>
                            <br>
                            ——
                            <br>
                            <span># 花束推荐 #</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="new">
                <div>
                    <img src="/img/index/size_03_gsm6.png" alt="">
                    <span>NEW</span>
                </div> 
            </div>
            <div class="new-product mb-4">
                <div class="new-left">
                    <div class="left-top">
                        <span>LOVE WLTHOUT END HATH NO END</span>
                    </div>
                    <img src="/img/index/farcer_l_03_j7wd.jpg" alt="">
                    <div class="base">
                        <div class="left-base mt-3">
                            <span>I WISH YOU BON BOYAGE</span>
                            <div class="line"></div>
                            <div class="base01">
                                <span>粉百合勿忘我混搭花束</span>
                            </div>
                            <div class="base02">
                                <span>见证幸福</span>
                            </div>
                            <div class="base03">
                                <span>--为爱而生</span> 
                            </div>    
                            <button>立即购买</button>
                        </div>   
                    </div>
                </div>
                <div class="new-right">
                    <carousel></carousel>
                </div>
                
            </div>
            <div class="title-img1">
                <img src="/img/index/forver_rose_04_03_ulfh.jpg" alt="">
                <div class="title">
                <div>
                    <span>19枝，</span>
                    <span>粉白玫瑰花束</span>
                </div>
                <span>GOOD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BEGINNING</span>
                </div>
            </div>
            <div class="mix-title  d-flex mb-5">
                <div class="title-1 mr-3">
                <div class="title-1-1">
                    <div></div>
                </div>
                </div>
                <div class="title-2 mr-3">
                <div class="title-2-2">
                    <div>美好的开始，注定一生一世</div>
                </div>
                </div>
                <div class="title-1">
                <div class="title-1-1">
                    <div></div>
                </div>
                </div>
            </div>
            <div class="cyclic mb-4">
                <div class="row">
                <div class="col-6">
                    <img src="/img/index/for_07_5a7v.jpg" alt="">
                </div>
                <div class="col-6">
                    <div class="row">
                    <div class="col-12" style="font-size: 30px;color: #443232;text-align: center;margin-top: 70px;margin-bottom:45px;">
                        <span>爱情之花，玫瑰花</span>
                    </div>
                    <div class="col-12 mb-5" style="text-align: center;">
                        <span style="font-size: 14px;color: #5a5a5a;border-bottom: 1px solid #4c4c4b;border-top: 1px solid #4c4c4b;padding: 10px 0;text-align: center;">在爱情之河畅游的年轻人，都用此花献给自己的心上人来表达自己的感情</span>
                    </div>
                    <div class="col-12">
                        <div class="cyclic-lb">
                        <ul class="list-unstyled clearfix m-0">
                            <li class="float-left">
                            <img src="/img/index/flover_03_a6yj.png" alt="">
                            </li>
                            <li class="float-left">
                            <img src="/img/index/flover_05_qwgj.png" alt="">
                            </li>
                            <li class="float-left">
                            <img src="/img/index/flover_07_70gx.jpg" alt="">
                            </li>
                            <li class="float-left">
                            <img src="/img/index/flover_03_a6yj.png" alt="">
                            </li>
                            <li class="float-left">
                            <img src="/img/index/flover_05_qwgj.png" alt="">
                            </li>
                            <li class="float-left">
                            <img src="/img/index/flover_07_70gx.jpg" alt="">
                            </li>
                        </ul>
                        </div>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="navss mb-3">
                <div class="row">
                <div class="col-3 top-1">
                    <div style="float: left;">
                    <span class="p1">19支玫瑰花</span>
                    <span class="p2">爱到永恒</span>
                    <img src="/img/index/flover_sz_03_mocp.png" alt="">
                    </div>
                </div>
                <div class="col-3 top-1">
                    <div style="float: left;">
                    <span class="p3">19支香槟玫瑰</span>
                    <span class="p2">拥爱满怀</span>
                    <img src="/img/index/flover_sz_05_512s.png" alt="">
                    </div>
                </div>
                <div class="col-3 top-1">
                    <div style="float: left;">
                    <span class="p1">19支黄玫瑰</span>
                    <span class="p2">手捧幸福</span>
                    <img src="/img/index/flover_sz_07_lgq2.png" alt="">
                    </div>
                </div>
                <div class="col-3 top-1">
                    <div style="float: left;">
                    <span class="p1">19支白玫瑰</span>
                    <span class="p2">真诚浪漫</span>
                    <img src="/img/index/flover_sz_09_kjav.jpg" alt="">
                    </div>
                </div>
                </div>
            </div>
            <div class="title-img">
                <img src="/img/index/forver_d_03_3f0h.jpg" alt="">
                <div class="title">
                <div>
                    <span>19枝，</span>
                    <span>混搭花束</span>
                </div>
                <span>GOOD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BEGINNING</span>
                </div>
            </div>
            <div class="mix-title  d-flex mb-5">
                <div class="title-1 mr-3">
                <div class="title-1-1">
                    <div></div>
                </div>
                </div>
                <div class="title-2 mr-3">
                <div class="title-2-2">
                    <div>美好的开始，注定一生一世</div>
                </div>
                </div>
                <div class="title-1">
                <div class="title-1-1">
                    <div></div>
                </div>
                </div>
            </div>
            <div class="mix-match mb-5">
                <div class="match-left mr-4" style="float: left;">
                <img src="/img/index/ds_15_1tmi.jpg" alt="">
                <div>
                    <strong>较浓母子情</strong>

                    <span>紫色康乃馨，白色洋桔梗，水晶枝</span>
                </div>
                </div>
                <div class="match-middle mr-4" style="float: left;">
                <img src="/img/index/fl_17_z0dg.jpg" alt="">
                <div style="width:245px;height:80px;background-color:#fff; position: relative;left:195px;bottom:40px;font-size:12px;color:#5a5a5a;text-align: center;">
                    <span style="padding-top: 15px;display: inline-block">FLOVER BLEND</span>
                    <br>
                    ——
                    <br>
                    <span># 百合花混搭花束 #</span>
                </div>
                </div>
                <div class="match-right" style="float: left;">
                <img src="/img//index/fr_20_c1mx.png" alt="">
                <div>
                    <strong>只想和你在一起</strong>
                    <span>百合花，栀子叶，勿忘我，紫色水晶枝</span>
                </div>
                </div>
            </div>
            <div class="cards">
                <ul>
                    <li v-for="(t,i) of titles" :key="i" >
                        <div class="baci" @click="show(i)">
                            <div class="xh-s-item xhs clearfix" v-show="i==visible" :data-i="i">
                                <span class="float-left">数量：</span>
                                <div class="float-left xz-number d-flex">
                                    <button class="btn" @click="minus">-</button>
                                    <span class="s1">{{n}}</span>
                                    <button class="btn" @click="add">+</button>
                                    <span class="s2">库存99999</span>
                                </div>
                                <button class="btns" @click="addcart" :data-lid="`${t.href.split('=')[1]}`"
                            :data-price="t.price" :data-title="t.title" :data-img="t.pic"
                            :data-count="n">确定</button>
                            </div>
                        </div>
                        
                        <router-link :to="`/details/${t.href.split('=')[1]}`">
                            <img :src="t.pic" alt="card-img-top">
                        </router-link>
                        <div class="card-body">
                            <router-link :to="`/details/${t.href.split('=')[1]}`">
                                <b>{{t.title}}</b>
                            </router-link>
                            <p style="color: #ed5672;cursor: pointer;">{{t.details}}</p>
                            <p>价格：
                            <span>￥{{t.price.toFixed(2)}}</span>
                            </p>
                            <p style="color: black;">{{t.intr}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        
    </div>
</template>
<script>
import animation from '../components/animation.vue'
import carousel from '../components/index/Carousel'

export default {
    components:{animation,carousel},
    data(){
        return {
            titles:[],
            n:1,
            visible:-1,
            i:0
        }
    },
    methods:{
        // 添加购物车
    addcart(event){
        var uid = localStorage.getItem('uid') || sessionStorage.getItem("uid") || '';
        // 判断用户是否登录
        if(uid!==''){
          // 获取相应数据
          var lid=event.target.dataset.lid;
          var count=event.target.dataset.count;
          var lname=event.target.dataset.title;
          var price=event.target.dataset.price;
          var img=event.target.dataset.img;
          // 执行axios
          this.axios.get('/cart/add',{
            params:{
             count,lname,price,img,uid,lid
            }
          }).then(result=>{
              if(result.data.code==-2){
                 alert('添加失败')
              }else{
                 alert('添加成功')
              }
          })
        }else{
          alert("请登录");
          this.$router.push('/login')
        }
      },
        show(i){
            this.visible=i;  

        },
    minus(){
        if(this.n>1){
          this.n--;
        }
      },
      add(){
        this.n++
      }
    },
    mounted(){
        this.axios.get("/index").then(result=>{
            this.titles=result.data
            // console.log(result.data)
        })
    }
}
</script>

<style lang="scss">
    .main-bady>.recommend{
        background-color: rgb(252, 82, 86);
        height: 300px;    
    }
    .main-bady>.new{
        width: 1200px;
        margin: 0 auto;
    }
    .main-bady>.new>div{ 
        width: 100px;
        height: 36px;
        background-color: #ed5672;
        color: #fff;
        font-size: 14px;
        margin: 40px 0 15px 0;
        padding-top: 5px;
        text-align: center;
    }
    .main-bady>.new>div>span{
        margin-left: 5px;
    }
    .main-bady>.new-product{
        width: 1200px;
        height: 600px;
        margin: 0 auto;  
    }
    .main-bady>.new-product>.new-left{
        float: left;
        width: 520px;
    }
    .main-bady>.new-product>.new-left>.left-top{
        color: #393937;
        font-size: 30px;
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        margin-bottom: 20px;
    }
    .main-bady>.new-product>.new-left>.base{
        position: relative;
    }
    .main-bady>.new-product>.new-left>.base>.left-base{
        position: absolute;
        right: 0;
    }
    .main-bady>.new-product>.new-left>.base>.left-base>.line{
        position: absolute;
        right: 0;
        border-bottom: 3px solid #443232;
        width: 105px;
        height: 23px;
    }
    .main-bady>.new-product>.new-left>.base>.left-base>span{
        color: #393937;
        font-size: 30px;
        
    }
    .main-bady>.new-product>.new-left>.base>.left-base>.base01{
        position: absolute;
        right: 0;
        top: 90px;
        color: #443232;
        line-height: 140%;
        font-size: 18px;
    }
    .main-bady>.new-product>.new-left>.base>.left-base>.base02{
        position: absolute;
        right: 0;
        top: 120px;
        color: #443232;
        line-height: 140%;
        font-size: 18px;
    }
    .main-bady>.new-product>.new-left>.base>.left-base>.base03{
        position: absolute;
        right: 0;
        top: 150px;
        color: #443232;
        line-height: 140%;
        font-size: 18px;
    }
    .main-bady>.new-product>.new-left>.base>.left-base>button{
        position: absolute;
        right: 0;
        top: 180px;
        background-color: #fc5256;
        border: none;
        color: #fff;
        font-size: 12px;
        width: 120px;
        height: 26px;
    }
    .main-bady>.new-product>.new-right{
        float: right;
        width: 520px;
    }
    .main-bady>.rose{
        width: 1200px;
         margin: 0 auto;
    }
    .main-bady>.rose>.rose.title{
        position: relative;
    }
    .main-bady>.rose>.rose.title>.rose-title1{
        position: absolute;
        left: 155px;
        width: 300px;
        height: 30px;
        border: 3px solid #000;
    }
    .main-bady>.rose>.rose.title>.rose-title1>div{
        width: 300px;
        height: 30px;
    }
    .main-bady>.rose>.rose.title>.rose-title1>div>div{
        border: 3px solid #000;
    }
    .main-bady{
    width: 1200px;
      margin: 0 auto;
      .cyclic-lb{
        overflow: hidden;
        &>ul{
          width: 200%;
          animation: 20s move linear infinite;
          &:hover {
            animation-play-state: paused;
        }
          li {
            width: 16.6%;
            img {
              width: 90%;
            }
          }
        }
      }
      .navss{
        .top-1{
          div{
             position: relative; 
             .p1{
                  position: absolute;
                  top: 85px;
                  left: 31px;
                  font-size: 18px;
                  color: #443232;
             }
             .p3{
                  position: absolute;
                  top: 85px;
                  left: 15px;
                  font-size: 18px;
                  color: #443232;
              }
              .p2{
                  position: absolute;
                  top: 115px;
                  left: 63px;
                  font-size: 15px;
                  color: #c5c1c1;
              }
          }
      }
      }
      .title-img1{
        width: 350px;
        height: 130px;
        margin: 0 auto;
        position: relative;
        img{
          position: absolute;
          top: -10px;
        }
        .title{  
          &>div{
            position: absolute;
            right: 20px;
            top: 50px;
            &>span:first-child{   
              font-size: 30px;
              color: rgb(237,86,114);
            }
            &>span:nth-child(2){
              font-size: 14px;
              color: rgb(57,57,55);
            }
          }
          &>span{
            position: absolute;
            right: 20px;
            top: 95px;
            font-size: 20px;
          }
        }
      }
      .title-img{
        width: 350px;
        height: 130px;
        margin: 0 auto;
        position: relative;
        img{
          position: absolute;
          top: 10px;
        }
        .title{  
          &>div{
            position: absolute;
            right: 20px;
            top: 50px;
            &>span:first-child{   
              font-size: 30px;
              color: rgb(237,86,114);
            }
            &>span:nth-child(2){
              font-size: 14px;
              color: rgb(57,57,55);
            }
          }
          &>span{
            position: absolute;
            right: 20px;
            top: 95px;
            font-size: 20px;
          }
        }
      }
      .mix-title{
        width: 900px; 
        margin: 0 auto;      
        .title-1{
         width: 300px; 
         .title-1-1{
           width: 300px;
            div{
              width: 300px;
              height: 11px;
              border-bottom: 1px solid #1d0404;
            }
         }
        }
        .title-2{
          width: 300px;
         height: 22px; 
         z-index: 30;
         .title-2-2{
           width: 300px;
           height: 22px;
            div{
              text-align: center;
              width: 300px;
              height: 22px;
              border: 1px solid #1d0404;
              color: #393937;
              font-size: 12px;
              
            }
         }
        }
      }
      .mix-match{
        height: 395px;
       .match-left{
         width: 240px;
         position: relative;
         div{
            strong{
            position: absolute;
            right: 0px;
            padding-top: 5px;
            color: #443232;
            font-size: 20px;
            }
            span{
              position: absolute;
              right: 0;
              margin-top: 30px;
              padding-top: 10px;
              font-size: 14px;
              color: #5a5a5a;
            }
         }
       } 
       .match-right{
        width: 240px;
        position: relative;
        div{
           strong{
            position: absolute;
            left: 0;
           padding-top: 5px;
           color: #443232;
           font-size: 20px;
           }
           span{
            position: absolute;
            left: 0;
             margin-top: 30px;
             padding-top: 10px;
             font-size: 14px;
             color: #5a5a5a;
           }
        }
      } 
      }
    .cards{   
      overflow: hidden;
      display: block;
      padding: 0;
      ul{
          list-style: none;
          padding: 0;
          li{
              vertical-align: top;
              width: 230px;
              float: left;
              border: 1px solid #f4f4f4;
              margin-right: 10px;
              margin-bottom: 10px;
              padding: 15px;
              position: relative;
              .baci{
                  background-image: url(/img/product/details/carta-img4.png),url(/img/product/details/carta-img5.png);
                  background-repeat: no-repeat; 
                  z-index: 105;
                  position: absolute;
                  width: 35px;
                  height: 35px;
                  right: 10px;
                  top: 30px;
                  cursor: pointer;
                  .xh-s-item{
                  position: absolute;
                  top: 120px;
                  right: 0px;
                  height: 183px;
                  background-color: #fff;
                  span{
                      font-size: 14px;
                      padding-top: 5px;
                  }
                  .xz-number{
                      .btn{
                          background-color: #fff;
                      }
                      .s1{
                          width: 40px;
                          height: 38px;
                          line-height: 30px;
                          background-color: #eeeeee;
                          text-align: center;
                      }
                      .s2{
                          height: 38px;
                          line-height: 38px; 
                          text-align: center;
                      }
                  }
                  .btns{
                      position: absolute;
                      bottom: 0;
                      width: 100%;
                      height: 45px;
                      background-color: #dd2828;
                      left: 0;
                      color: #fff;
                      border: none;
                  }
                }
              }
              
              img{
                  width: 200px;
                  height: 200px;
                  padding: 10px;
                  vertical-align: middle;
                  text-align: center;
                  cursor: pointer;
              }
              div{
                  width: 200px;
                  float: left;
                  padding: 0 0 5px 10px;
                  b{
                      font-size: 12px;
                      color: #000000;
                      cursor: pointer;
                  }
                  p{   
                      font-size: 12px;
                      color: #acacac;
                      margin:  0;
                      padding: 5px 0;
                      span{
                          color: #ff3c00;
                      }
                  } 
              }
              
          }
      }
  }
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>>

